<template>
	<view class="container flex_C">
		<FeNavbar :isBorder="false" :back-title="scrollTop>45?'客服':''"/>
		<scroll-view class="scroll-view" scroll-y="true" @scroll="onScroll">
			<view class="title">
				<text class="t">客服中心</text>
			</view>
			<view class="group" v-for="(item,index) in nav" :key="index">
				<view class="group_label">{{item.group_label}}</view>
				<view class="group_child_wrap" v-for="(it,indx) in item.child" :key="indx">
					<view class="item_wrap flexV_sb">
						<text class="label">{{it.categoryName}}</text>
						<view class="flexV" v-if="!it.guides.length">
							<!-- <text class="r_label" v-if="it.r_label">{{it.r_label}}</text> -->
							<image class="icon" src="/static/common/right_icon.png" mode=""></image>
						</view>
					</view>
					<view
						class="item_child_wrap flexV_sb"
						v-for="(i,ind) in it.guides"
						:key="ind"
						@click="toDetails(i)"
					>
						<view class="label">{{i.title}}</view>
						<view class="flexV">
							<text class="r_label" v-if="it.r_label">{{it.r_label}}</text>
							<image class="icon" src="/static/common/right_icon.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="tell_wrap flexHV" @click="onTell">
			<image class="icon" src="/static/common/headset_icon.png" mode=""></image>
			<text class="t">客服电话 {{tell}}</text>
		</view>
	</view>
</template>

<script>
import { supportApi } from '@/api/message.js'
import FeNavbar from '@/components/FeNavbar/FeNavbar.vue'
import {requestPermission} from "@/util/permision.js"
export default {
	components:{
		FeNavbar
	},
	data() {
		return {
			scrollTop: 0,
			nav:[],
			tell: ''
		}
	},
	onLoad() {
		this.getData()
	},
	methods: {
		onScroll(e){
			this.scrollTop = e.detail.scrollTop;
			console.log(e.detail.scrollTop)
		},
		async onTell(e){
			const _requestPermission = await requestPermission("callphone")
			if (_requestPermission != 1) return
			
			uni.makePhoneCall({
				phoneNumber: this.tell
			})
		},
		async getData(){
			uni.showLoading({
				mask: true,
				title: '加载中~'
			})
			const res = await supportApi();
			uni.hideLoading()
			if(res.code == 200){
				this.tell = res.data.humanSupport.phone
				this.nav = [{
					group_label: '操作引导',
					child: res.data.operGuide
				},{
					group_label: '常见问题',
					child: res.data.FAQ.map(item=>{
						return {
							...item,
							guides: item.questions
						}
					})
				}]
			}
		},
		toDetails(i){
			uni.navigateTo({
				url: '/pages/common/webView?src='+i.contentUrl
			})
		}
	}
}
</script>

<style scoped lang="scss">
.container{
	height: 100vh;
	.scroll-view{
		height: 0;
		flex: 1;
	}
	.title{
		margin: 0 32rpx;
		padding: 32rpx 0;
		.t{
			font-weight: 600;
			font-size: 50rpx;
			color: #26282B;
		}
	}
	.group{
		padding: 0 32rpx;
		padding-top: 24rpx;
		border-bottom: 20rpx solid #F5F7F8;
		&:last-child{
			border: none;
		}
		.group_label{
			font-weight: 600;
			font-size: 28rpx;
			color: #A6ACB4;
			border-bottom: 1px solid #DBE0E6;
			padding-bottom: 12rpx;
		}
		.group_child_wrap{
			border-bottom: 1px solid #DBE0E6;
			&:last-child{
				border: none;
			}
		}
		.r_label{
			font-weight: 400;
			font-size: 30rpx;
			color: #A6ACB4;
		}
		.icon{
			width: 24rpx;
			height: 24rpx;
			margin-left: 20rpx;
		}
		.item_wrap{
			height: 108rpx;
			.label{
				font-weight: 600;
				font-size: 30rpx;
				color: #26282B;
			}
		}
		.item_child_wrap{
			height: 80rpx;
			.label{
				font-weight: 400;
				font-size: 30rpx;
				color: #7B828A;
				padding-left: 40rpx;
				position: relative;
				&::after{
					position: absolute;
					top: 50%;
					left: 10rpx;
					width: 12rpx;
					height: 12rpx;
					background-color: #7B828A;
					border-radius: 50%;
					display: block;
					content: "";
					margin-top: -6rpx;
				}
			}
		}
	}
	.tell_wrap{
		position: fixed;
		width: 398rpx;
		height: 64rpx;
		background: #EEF1F6;
		border-radius: 200rpx;
		bottom: 60rpx;
		left: 50%;
		transform: translateX(-50%);
		.icon{
			width: 40rpx;
			height: 40rpx;
			margin-right: 8rpx;
		}
		.t{
			font-weight: 400;
			font-size: 26rpx;
			color: #7B828A;
		}
	}
}
</style>
